<!doctype html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorator="base"
      th:with="pageTitle='进度管理'">
<head>
    <link rel="stylesheet" th:href="@{/css/index.css}">
    <style>
    </style>
</head>
<body>
<th:block layout:fragment="custom_content">
    <el-button type="primary" size="mini" @click="goback" style="margin-top:5px">返回</el-button>
    <input type="hidden" id="id"/>

    <el-form :model="editMenuForm" ref="editMenuForm" size="mini">
    <el-table :data="tableData" v-loading.body="loading" stripe style="width: 600px;margin-top:10px">
        <el-table-column type="index" label="序号" width="100px"></el-table-column>
        <el-table-column prop="username" label="参与人员" width="180"></el-table-column>
        <el-table-column prop="id" width="0px" style="display:none;"
                         v-if="id==9999"></el-table-column>


        <el-table-column label="进度" min-width="150px">
            <template slot-scope="scope">
                <template v-if="editIndex!=scope.$index">
                    {{ scope.row.schedule }}
                </template>
                <template v-if="editIndex==scope.$index">
                    <!--<el-form-item prop="schedule">-->
                        <!--<el-input v-model="editMenuForm.schedule" style="max-width: 150px"></el-input>-->
                    <!--</el-form-item>-->

                    <el-select v-model="editMenuForm.schedule" placeholder="请选择进度">
                        <el-option label="0%" value="0%"></el-option>
                        <el-option label="10%" value="10%"></el-option>
                        <el-option label="20%" value="20%"></el-option>
                        <el-option label="30%" value="30%"></el-option>
                        <el-option label="40%" value="40%"></el-option>
                        <el-option label="50%" value="50%"></el-option>
                        <el-option label="60%" value="60%"></el-option>
                        <el-option label="70%" value="70%"></el-option>
                        <el-option label="80%" value="80%"></el-option>
                        <el-option label="90%" value="90%"></el-option>
                        <el-option label="100%" value="100%"></el-option>
                    </el-select>
                </template>
            </template>
        </el-table-column>

        <!--<el-table-column prop="schedule" label="进度" width="200"></el-table-column>-->
        <el-table-column label="操作" min-width="150px">
            <template slot-scope="scope">
                <el-button size="mini" @click="handleSaveEdit(scope.row)" v-if="editIndex==scope.$index">保存</el-button>
                <el-button size="mini" @click="handleCloseEdit" v-if="editIndex==scope.$index">取消</el-button>
                <el-button size="mini" @click="handleOpenEdit(scope.$index, scope.row)" v-if="editIndex!=scope.$index">编辑</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="pageNum"
            layout="total, prev, pager, next"
            :total="total">
    </el-pagination>
    </el-form>
</th:block>
<th:block layout:fragment="javascript">
    <script th:src="@{/moment.js}"></script>
    <script>
        var indexVue = new Vue({
            el: '#app',
            data: function () {

                return {
                    siderWidthDialog:false,
                    siderbarWidth:15,
                    tableData: [],
                    pageNum: 0,
                    breadcrumbs:['进度管理'],
                    total: 0,
                    editIndex:2000,
                    menus: [],
                    editMenuForm:{id:'', username:'', schedule:''},
                    loading:false,
                    isCollapse: false,
                    defaultIndex: '1',
                    regulationMenus: [],
                    deptTrees:[]
                }
            },
            methods: {
                handleSaveEdit:function(row){
                    var $this = this;
                    var condition = {};
                    var id = row.id;
                    var schedule = $this.editMenuForm.schedule;

                        $.ajax({
                            cache: true,
                            url:'/regulation/schedule/edit/',
                            type: 'POST',
                            // data: JSON.stringify(condition),
                            data: {id: id,schedule:schedule},
                            method:'post',
                            success:function (data) {
                                if(data.status){
                                    row.schedule=$this.editMenuForm.schedule;
                                    $this.editIndex=2000;
                                    $this.$message.success('修改成功');
                                    $this.findMenuOptions();
                                }else{
                                    handleError(data, $this);
                                }
                            },
                            error:function (jqXHR, textStatus, errorThrown) {
                                $this.$message.error('服务器有异常，请稍后重试');
                            }
                        });

                },
                handleCloseEdit:function(){
                    this.editMenuForm = {_id:'',schedule:''};
                    this.editIndex = 2000;
                },
                handleOpenEdit:function(index, row){
                    this.editMenuForm = {_id:row._id, schedule:row.schedule};
                    this.editIndex = index;
                },
                //时间格式化
                dateFormat: function (row, column) {
                    var date = row[column.property];
                    if (date == undefined) {
                        return "";
                    }
                    return moment(date).format("YYYY-MM-DD HH:mm:ss");
                },
                initMenu: function () {
                    var $this = this;
                    var data = commonInitMenu($this);
                },
                handleCurrentChange: function (val, size) {
                    search();
                    var $this = this;
                    $this.$nextTick(function(){
                        changeFooterHeight();
                    })
                },
                addHeight: function () {
                    var $this = this;
                    $this.$nextTick(function () {
                        changeFooterHeight();
                    })
                },
                goback: function () {
                    var id =   $("#id").val();
                    location.href = "/regulation/showregulation/"+id;
                },
                toggleMenu: function () {
                    this.isCollapse = !this.isCollapse;
                    window.localStorage.setItem('isCollapse',this.isCollapse);
                },
                changeSiderWidth:function(value){
                    changeSiderWidth(this,value);
                },
                openChangeSiderWidth:function(){
                    this.siderWidthDialog=true;
                }
            },
            created: function () {
                initCssProperty(this);
            }
        });

        function search(pageNum,id) {
            id = $("#id").val();
            var condition = {pageNum: indexVue.pageNum,ruleId:id};
            indexVue.loading = true;
            $.ajax({
                cache: true,
                url: '/regulation/schedule?newDate='+Math.random(),
                type: 'POST',
                data: JSON.stringify(condition),
                dataType: 'json',
                contentType: 'application/json',
                async: false,
                success: function (data) {
                    indexVue.loading = false;
                    if (data.status == 1) {
                        var pageInfo = data.value;
                        indexVue.tableData = pageInfo.list;
                        $("#fileName").html(data.msg);
                        indexVue.pageNum = pageInfo.pageNum;
                        indexVue.total = pageInfo.total;
                        indexVue.addHeight();
                    }
                }
            });

        }

        function init() {
            changeFooterHeight();
            indexVue.initMenu();
        }

        $(function () {
            init();
            var strs = location.href.split("/");
            var id = strs[strs.length - 1];
            $("#id").val(id);
            search(1, id);
            changeFooterHeight();
        })
    </script>
</th:block>
</body>
</html>